<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>APP</title>
		<link href="css/weui.min.css" rel="stylesheet" />
		<link href="css/jquery-weui.min.css" rel="stylesheet" />
		<link href="css/style.css" rel="stylesheet" />
		<link href="css/flex.css" rel="stylesheet" />
		<link href="fonts/iconfont.css" rel="stylesheet" />
		<script src="js/immersed.js"></script>
	</head>
	<script>
		//$(".banner").css('top',STATUSBAR_HEIGHT + 44 + 'px')
		var height = STATUSBAR_HEIGHT + 44;
		var styleObj = document.createElement('style');
		styleObj.type = 'text/css';
		styleObj.innerHTML = ".status-bar-height{height:" + height + "px}";
		document.getElementsByTagName('HEAD').item(0).appendChild(styleObj);
	</script>
	<style>
		body {
			background-color: #eee;
		}
		
		.banner {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 130px;
			z-index: 100;
			background-color: #45a75c;
		}
		
		.post-box {
			width: 80%;
			margin: 35px auto 0 auto;
		}
		
		.post {
			text-align: center;
			width: 50%;
			float: left;
			color: #fff;
		}
		
		.post i {
			font-size: 40px;
		}
		
		.post p {
			font-size: 12px;
			margin-top: -10px;
		}
		
		.text-info {
			font-size: 12px;
			color: #666;
			padding: 20px 90px 0 15px;
		}
		
		.text-title {
			color: #999;
			font-size: 14px;
			padding: 15px 0 0 0;
			margin-bottom: 10px;
			text-align: center;
		}
		
		.content {
			position: absolute;
			left: 0;
			top: 130px;
			width: 100%;
		}
		
		.xuqiu-item {
			margin: 5px 15px;
			background-color: #fff;
			margin-bottom: 15px;
			border-radius: 5px;
		}
		
		.xuqiu-item-con {
			padding: 10px;
			position: relative;
		}
		
		.xuqiu-item-con img {
			position: absolute;
			left: 10px;
			top: 10px;
			width: 80px;
		}
		
		.xuqiu-item-con .text {
			margin: 0 0 0 90px;
		}
		
		.xuqiu-item-footer {
			background-color: #f6f6f6;
			border-radius: 0 0 5px 5px;
		}
		
		.xuqiu-item-time {
			text-align: center;
			margin-bottom: 3px;
		}
		
		.xuqiu-item-time span {
			font-size: 12px;
			color: #999;
			border-radius: 3px;
			padding: 2px 8px;
		}
		
		.xuqiu-item-status span {
			color: #fff;
			font-size: 12px;
			margin: 0 10px 0 0;
			border-radius: 3px;
			padding: 2px 5px;
		}
		
		.layui-elem-field {
			margin: 0 20px;
		}
		
		.layui-elem-field legend {
			padding: 0 10px;
			font-size: 12px;
			font-weight: 300;
			text-align: center;
			color: #999;
		}
		
		.layui-field-title {
			margin: 20px 0 20px;
			border: none;
			border-top: 1px solid #ddd
		}
	</style>

	<body>
<div class="weui-pull-to-refresh__layer">
					<div class='weui-pull-to-refresh__arrow'></div>
					<div class='weui-pull-to-refresh__preloader'></div>
					<div class="down">下拉刷新</div>
					<div class="up">释放刷新</div>
					<div class="refresh">正在刷新</div>
				</div>
		<div id="app" style="position: relative;">

			<div class="banner bg-line">
				<div class="post-box">
					<div class="post" onclick="clicked('zhaohuo_add.html','pop-in')">
						<i class="iconfont icon-cameraadd"></i>
						<p>发布需求</p>
					</div>
					<div class="post" onclick="clicked('zhaohuo_my.html','pop-in')">
						<i class="iconfont icon-form"></i>
						<p>我的需求</p>
					</div>
				</div>
			</div>

			<div style="height:130px;"></div>

				

				<div>
					<div class="text-info">
						如果在云库没有找到你想要的宝贝，或者你想定制一款只属于你独一无二的精品。<br /> 来吧，发布你的需求
					</div>
					<fieldset class="layui-elem-field layui-field-title">
						<legend>看看别人都发布了些什么需求</legend>
					</fieldset>
				</div>

				<template v-for="(vo,index) in items">
					<div class="xuqiu-item">
						<div class="xuqiu-item-con" style="min-height: 100px;" v-if="vo.picture_id!=0">
							<img :src="v+'@!200x200'" @click='show(vo.pics,vo.desc)' v-for="(v,index) in vo.pics" v-if="index < 1">
							<div class="text">
								{{vo.desc}}
							</div>
						</div>
						<div class="xuqiu-item-con" v-else>
							{{vo.desc}}
						</div>
						<div class="xuqiu-item-footer " flex="">
							<div flex-box="0" class="xuqiu-item-time"><span>{{vo.time}}</span></div>
							<div flex-box="1"></div>
							<div flex-box="0" class="xuqiu-item-status">
								<span v-if="vo.status==4" style="background-color: #ff0000;">已解决</span>
								<span v-else style="background-color: #45a75c;">进行中</span>

							</div>
						</div>
					</div>
				</template>

				<template v-if="loading == 'nodata'">
					<div flex="main:center cross:center" style="width:100%; height: 400px; ">
						<img src="images/nodata.png" style="width: 150px;">
					</div>
				</template>

				<template v-if="loading == 'more'">
					<div class="weui-loadmore">
						<i class="weui-loading"></i>
						<span class="weui-loadmore__tips">加载更多</span>
					</div>
				</template>

				<template v-if="loading == 'more_nodata'">
					<div class="weui-loadmore weui-loadmore_line">
						<span class="weui-loadmore__tips" style="background: #eee;">没有啦</span>
					</div>
				</template>

			<div id="toTop" onclick="Top()">
			<i class="iconfont icon-top"></i>
		</div>
		</div>

		

		<script src="js/mui.min.js"></script>
		<script src="js/jquery-2.1.4.js"></script>
		<script src="js/jquery-weui.min.js"></script>
		<script src="js/vue.js"></script>
		<script src="js/smarge.js"></script>
		<script src="js/imgload.js"></script>
		<script src="js/md5.min.js"></script>
		<script src="js/bscroll.min.js"></script>
		<script src="js/common.js"></script>

		<script type="text/javascript" charset="utf-8">
			mui.init();

			mui.plusReady(function() {

				$(document.body).pullToRefresh(); 

				var vm = new Vue({
					el: "#app",
					data: {
						items: [],
						loading: 'inits',
						k: '',
						p: 1,
						r: 20
					},
					mounted: function() {
						this.inits();
					},
					methods: {
						inits: function() {
							var vm = this;

							Get(SERVER_URL + "&c=Zhaohuo&a=datalist", {
								p: 1,
								r: vm.r
							}, function(data) {
								if(data.status) {
									vm.items = data.info;
									vm.p = 2;
									vm.loading = 'more';
								} else {
									vm.loading = 'nodata';
								}
							})

							$(document.body).infinite(150).on("infinite", function() {
								var self = this;
								if(self.loading) return;
								self.loading = true;

								Get(SERVER_URL + "&c=Zhaohuo&a=datalist", {
									p: vm.p,
									r: vm.r,
								}, function(data) {
									if(data.status) {
										for(var i in data.info) {
											vm.items.push(data.info[i]);
										}
										vm.p++;
										self.loading = false;
									} else {
										vm.loading = 'more_nodata';
										self.loading = false;
									}

								})

							});

							$(document.body).on("pull-to-refresh", function() {
								Get(SERVER_URL + "&c=Zhaohuo&a=datalist", {
									p: 1,
								r: vm.r
								}, function(data) {
									if(data.status) {
										$(document.body).pullToRefreshDone();
										vm.items = data.info;
										vm.p = 2;
										vm.loading = 'more';
									} else {
										$(document.body).pullToRefreshDone();
										vm.loading = 'nodata';
									}
								})

							});

							$(document).scroll(function() {
								var scrollTop = $(this).scrollTop();
								if(scrollTop > 1500) {
									$("#toTop").show();
								} else {
									$("#toTop").hide();
								}
							});

						},
						show: function(pics, text) {
							Smarge.set('GoodsInfo', {
								pics: pics,
								text: text
							});
							clicked('pic_show.html', 'zoom-fade-out');
						}
					}
				})

			});
		</script>
	</body>

</html>